<template>
  <div class="detail">
       <Shopcar/>

    <img
      :src="'http://127.0.0.1:5000/imgs/' + good.imgUrl"
      alt=" 图片暂无"
      :style="{ width: '100%', height: '270px' }"
    />
    <!-- 商品信息 -->
    <div class="goods_information">
      <p>{{ good.name }}</p>
      <p>
        月售<span>{{ good.sellCount }}</span
        >份&nbsp;好评度<span>{{ good.rating }}</span
        >%
      </p>

      <p>
        <span class="price"
          >&yen;{{ Number(good.price).toFixed(2) }}&nbsp;
          <del>&yen;{{ Number(good.price + 5).toFixed(2) }}</del></span
        >
        <span    @click="$store.commit('addNum', { id: good.id, num: 1 })"  class="asdadv" >
          <i >+</i>
          加入购物车</span
        >
      </p>
    </div>
    <div class="introduce">
      <span>商品介绍</span>
      <p>{{ good.goodsDesc }}</p>
    </div>

    <i class="iconfont icon-fanhui" @click="clickChild"></i>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Igoods } from "@/interface/goodsinterface";
import Shopcar from "../views/main_modules/Shopcar.vue"


@Component
({
  //注册自定义组件------购物车点击组件
  components:{
      Shopcar,
  }

})
export default class Detail extends Vue {
  good: Igoods = {
    //商品约束
    // 不加问号,就给默认值
  };

  created(): void {
    // console.log(this.$route.query);
    //传值
    this.good = this.$route.query;
  }

   clickChild(): void {
    // this.$router.push({ path: "/main/goods",  });
    // this.$router.go(-1)
     history.go(-1) 
  }
}
</script>

<style scoped lang='scss'>
.detail {
  background-color: rgb(233, 233, 233);
  height: 100%;
  overflow: scroll;
}
//隐藏右侧滚动条
.detail::-webkit-scrollbar {
  display: none;
}

// 商品信息
.goods_information {
  height: 100px;
  padding: 20px 15px;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  background-color: rgb(255, 255, 255);
  margin: -4px 0 20px;
  & > p:nth-of-type(1) {
    font-size: 18px;
    font-weight: bold;
  }
  & > p:nth-of-type(2) {
    font-size: 12px;
    // font-weight: bold;
    color: rgb(172, 172, 172);
  }
  //价格
  & > p:nth-of-type(3) {
    display: flex;
    justify-content: space-between;
    span:nth-of-type(1) {
      font-size: 22px;
      color: red;
      font-weight: bold;
    }
    del {
      font-size: 12px;
      color: rgb(172, 172, 172);
    }
    span:nth-of-type(2) {
      display: inline-block;
      background-color: rgb(250, 192, 1);
      font-size: 12px;
      font-weight: bold;
      width: 100px;
      line-height: 35px;
      font-weight: bold;
      vertical-align: middle;
      text-align: center;
      border-radius: 60px;
    }
  }
}

//商品介绍
.introduce {
  background-color: rgb(255, 255, 255);
  // height: 180px;

  box-sizing: border-box;
  margin-bottom: 20px;
  overflow: hidden;
  width: 100%;

  padding: 20px 15px;
  span {
    display: block;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 20px;
  }
  p {
    font-size: 14px;
  }
}

.icon-fanhui{
 position:fixed;
 top: 15px;
 left: 10px;
 font-weight: bold;
 color: rgb(0, 0, 0);
 font-size: 24px;
}
.asdadv{
  color: #fff;
  i{
    font-size: 24px;
    vertical-align: middle;
    font-weight: normal;
  }
}
</style>